<template>
	<view class="view-body">
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" :down="downOption" :up="upOption"
			@up="upCallback">
			<view v-if="advList.length  > 0" class="swiper-adv bz p-2 b-radius2 bg-white">
				<swiper style="min-height: 300rpx" interval="3000" duration="300"
					:indicator-dots="advList.length > 1?true:false" circular="true" indicator-color="#C6D7DC"
					indicator-active-color="#26C390" autoplay="true">
					<swiper-item class="b-radius2" v-for="(item,index) in advList" :key="index">
						<image style="width: 100%;height: auto;" class="banner" :src="item.image" :data-url="item.url"  
							:data-url_type="item.url_type" @tap="openurl" mode="widthFix" />
						<text class="adv-title">{{item.title}}</text>
					</swiper-item>

				</swiper>
			</view>



			<view v-if="newsTabs.length  > 0">
				<!-- 因为此处会返回全部，所以需要大于1 -->
				<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
				<view class="sticky-tabs">
					<me-tabs v-model="tabIndex" :tabs="newsTabs" :tabWidth="150" :height="80" @change="tabChange">
					</me-tabs>
					<!-- <view class="moreWrap" data-url="/pages/public/news/news-label" @tap="openurl">
						<image src="/static/images/index-news-tab-more.png" class="more" mode=""></image>
					</view> -->
				</view>
				<!-- 数据列表 -->
				<view class="wrap" style="padding: 10rpx;" >
					<block>
						<view class="news-list" v-for="(item,index) in newsList" :key="index"  style="margin: 10rpx; ">

							<view class="list bz p-2 d-flex flex-nowrap j-sb mb-2 bg-white py-3" style="border-radius: 10rpx;box-shadow: 0px 0px 5px #ccc;"
								v-if="item.type=='single_left'" @tap="openurl" :data-url="item.url"  :data-url_type="item.url_type">
								<image :src="item.showImage?item.showImage:'/static/images/12.png'" class="imgs"
									mode="aspectFill"></image>
								<view class=" flex-1 p-lr2 d-flex flex-column j-sb">
									<view class="title text-2">{{item.title}}</view>
									<view class="d-flex flex-nowrap a-center ">
										<view class="fDes margin-right-xs">{{item.pv}}浏览</view>
										<view class="fDes ml-2">{{item.createtime_text}}发布</view>
									</view>
								</view>
							</view>
							<view class="list bz p-2 d-flex flex-nowrap j-sb mb-2 bg-white py-3" style="border-radius: 10rpx;box-shadow: 0px 0px 5px #ccc;"
								v-if="item.type=='single_right'" @tap="openurl" :data-url="item.url"  :data-url_type="item.url_type">
								<view class=" flex-1 pr-2 d-flex flex-column j-sb">
									<view class="title text-2">{{item.title}}</view>
									<view class="d-flex flex-nowrap a-center ">
										<view class="fDes margin-right-xs">{{item.pv}}浏览</view>
										<view class="fDes ml-2">{{item.createtime_text}}发布</view>
									</view>
								</view>
								<image :src="item.showImage?item.showImage:'/static/images/12.png'" class="imgs"
									mode="aspectFill"></image>
							</view>
							<view class="list bz p-2 d-flex flex-nowrap j-sb mb-2 bg-white py-3" style="border-radius: 10rpx;box-shadow: 0px 0px 5px #ccc;"
								v-if="item.type=='zero'" @tap="openurl" :data-url="item.url"  :data-url_type="item.url_type">
								<view class=" flex-1 d-flex flex-column j-sb">
									<view class="title text-2">{{item.title}}</view>
									<view class="d-flex flex-nowrap a-center ">
										<view class="fDes margin-right-xs">{{item.pv}}浏览</view>
										<view class="fDes ml-2">{{item.createtime_text}}发布</view>
									</view>
								</view>
							</view>
							<view class="list bz p-2 d-flex flex-nowrap j-sb mb-2 bg-white py-3" style="border-radius: 10rpx;box-shadow: 0px 0px 5px #ccc;"
								v-if="item.type=='three'" @tap="openurl" :data-url="item.url"  :data-url_type="item.url_type">
								<view class="flex-1 d-flex flex-column j-sb">
									<view class="title text-2">{{item.title}}</view>
									<view class="py-2 d-flex flex-nowrap a-center j-sb">
										<image :src="image_item" class="productIms"
											v-for="(image_item,image_index) in item.showImage" :key="image_index"
											mode="aspectFill">
										</image>
									</view>
									<view class="d-flex flex-nowrap a-center margin-top-xs ">
										<view class="fDes margin-right-xs">{{item.pv}}浏览</view>
										<view class="fDes ml-2">{{item.createtime_text}}发布</view>
									</view>
								</view>
							</view>
							<view class="list bz p-2 d-flex flex-nowrap j-sb mb-2 bg-white py-3" style="border-radius: 10rpx;box-shadow: 0px 0px 5px #ccc;"
								v-if="item.type=='single'" @tap="openurl" :data-url="item.url"  :data-url_type="item.url_type" >
								<view class="flex-1 d-flex flex-column j-sb">
									<view class="title text-2">{{item.title}}</view>
									<view class="py-2 d-flex flex-nowrap a-center j-sb">
										<image :src="item.showImage" class="oneImgs" mode="aspectFill"></image>
									</view>
									<view class="d-flex flex-nowrap a-center margin-top-xs ">
										<view class="fDes margin-right-xs">{{item.pv}}浏览</view>
										<view class="fDes ml-2">{{item.createtime_text}}发布</view>
									</view>
								</view>
							</view>
							<view class="list bz p-2 d-flex flex-nowrap j-sb mb-2 bg-white py-3" style="border-radius: 10rpx;box-shadow: 0px 0px 5px #ccc;"
								v-if="item.type=='video'">
								<view class="flex-1 d-flex flex-column j-sb">
									<view class="title text-2">{{item.title}}</view>
									<video class="show-video py-2 d-flex flex-nowrap a-center j-sb b-radius1"
										style="width: 100%;border-radius: 5rpx;" :data-id="item.id" :key="item.id"
							 		:id="'video'+item.id" :src="item.showImage" controls :autoplay=false
										:poster="item.showImage+'?x-oss-process=video/snapshot,t_0,f_jpg'"
										object-fit="fill"></video>
										
										<view class="d-flex flex-row flex-nowrap a-center">
											<u-text prefixIcon="eye" :text='item.pv+"浏览"' :customStyle="{flex:'auto',marginRight: '2rpx'}"></u-text>
											<u-text prefixIcon="calendar"  :lines="1"     :text='item.createtime_text+"发布"'></u-text>
										</view>
									<!-- <view class="d-flex flex-nowrap a-center margin-top-xs">
										<view class="fDes margin-right-xs">{{item.pv}}浏览</view>
										<view class="fDes ml-2">{{item.createtime_text}}发布</view>
									</view> -->
								</view>
							</view>
						</view>


						<!-- 视频 -->

					</block>
				</view>
			</view>

		</mescroll-uni>
		<force-login @loginSuccess="loginCallback"></force-login>
		<share-wechat ref="share_wechat" @close="shareClose"></share-wechat>
		<detail-opelist ref="detail_opelist" :showPageIndex="false"></detail-opelist>

	</view>

</template>

<script src="./index.js"></script>

<style lang="scss">
	page {
		height: 100%;
		background: #F1F1F1;
	}

	.nav-2 {
		background: #ffffff;
		padding: 10rpx;

		.nav2-body {
			flex-wrap: wrap;

			.nav-bg-body {
				width: 50%;
				margin: 10rpx 0;

				.nav-bg {
					background: #FBF6FD;
					width: 94%;
					border-radius: 20rpx;
					padding: 10rpx 20rpx;

					.line1 {
						height: 110rpx;

						.navImg {
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
						}

						.title {
							font-size: 32rpx;
							font-weight: bold;
							margin-left: 20rpx;
							width: 200rpx;
							max-height: 100%;
							overflow: hidden;

						}
					}

					.line2 {
						color: #9FA2AB;
						font-size: 24rpx;
						height: 40rpx;
						overflow: hidden;
						line-height: 40rpx;
						margin-bottom: 20rpx;
					}
				}
			}

			.nav-bg-body-1 {
				width: 96%;
				margin: 10rpx auto;

				.nav-bg {
					width: 100%;

					.line1 {
						height: 150rpx;

						.title {
							width: 570rpx;

							.one-tip {
								color: #9FA2AB;
								font-size: 24rpx;
								margin-left: 20rpx;
								font-weight: normal;
							}
						}
					}
				}
			}
		}

	}

	.swiper-adv {
		background: #F1F1F1 !important;
		padding-bottom: 0rpx;

		.adv-title {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			color: #fff;
			padding: 10rpx;
			font-size: 28rpx;
		}
	}

	.swiper-nav {
		width: 94%;
		margin: 20rpx 3% 20rpx 3%;
	}

	.banner {
		border-radius: 20rpx;
	}

	.statistics-list {
		background: #FFFFFF;
		width: 100%;
		margin: 0rpx 0% 20rpx 0;
		padding: 10rpx 3%;
		position: relative;

		.zhiding {
			position: absolute;
			right: 28rpx;
			top: 16rpx;
			color: #26C390;
			width: 50rpx;
			text-align: center;
			height: 50rpx;

			.iconfont {
				font-size: 34rpx;
			}
		}

		.list-botton {
			height: 60rpx;
			line-height: 60rpx;
			width: 100%;
			font-size: 26rpx;
			position: relative;

			.iconfont {
				position: absolute;
				right: 8px;
				top: 0;
				font-size: 50rpx;
				color: #26C390;
			}

			.icon-fenxiang {
				right: 80rpx;
			}

			.icon-guanli {
				font-size: 36rpx;
				top: -2rpx;
			}
		}

		.s-title {
			padding: 10rpx 0;
			font-size: 28rpx;
		}

		.userInfo {
			height: 100rpx;

			.headimg {
				.head-img {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}

			.right {
				.username {
					height: 50rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					font-weight: 600;

					.user-name {
						display: inline-block;
						max-width: 450rpx;
						height: 100%;
						overflow: hidden;
					}

					.time-text {
						display: inline-block;
						padding: 0 16rpx;
						height: 30rpx;
						line-height: 30rpx;
						border-radius: 24rpx;
						margin-left: 11rpx;
						font-size: 22rpx;
						font-weight: normal;
						margin-top: 12rpx;
						border: 2rpx solid #EDEDED;
					}

					.time-text-1 {
						background: #EDEDED;
						color: #999999;
					}

					.time-text-2 {
						background: #EDEDED;
						color: #999999;

					}

					.time-text1 {
						color: #3B935E;
						border: 2rpx solid #3B935E;
					}

					.time-text-3 {
						color: red;
						border: 2rpx solid #3B935E;
					}
				}

				.desc {
					height: 50rpx;
					line-height: 50rpx;

					text {
						display: inline-block;
						font-size: 24rpx;
						color: #999999;
						padding-right: 20rpx;
						position: relative;
					}

					.zhanwei-text {
						width: 2rpx;
						height: 24rpx;
						background-color: #999999;
						padding: 0;
						position: absolute;
						top: 14rpx;
						right: 10rpx;
					}
				}

			}
		}
	}

	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: 0;
		background-color: #fff;

		.moreWrap {
			height: 80rpx;
			width: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			position: absolute;
			right: 0;
			top: 0;
			background: #fff;

			.more {
				width: 30rpx;
				height: 30rpx;
				display: block;
				margin: 0 auto;
			}
		}
	}

	.navList {
		width: 25%;
		margin: 20rpx 0;

		.navImg {
			width: 100rpx;
			height: 100rpx;
			display: block;
			margin: 0 auto;
			border-radius: 50%;
		}

		.navName {
			height: 50rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #141414;
			line-height: 50rpx;
			text-align: center;
		}
	}

	.list {
		.imgs {
			width: 168rpx;
			height: 168rpx;
			background: #F5F5F7;
			border-radius: 10rpx;
			flex-shrink: 0;
		}

		.title {
			font-size: 34rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #141414;
			line-height: 44rpx;
			height: 60rpx;
			letter-spacing: 3rpx;
		}

		.fDes {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #9797A8;
		}

		.productIms {
			width: 218rpx;
			height: 168rpx;
			border-radius: 10rpx;
			display: block;
		}

		.oneImgs {
			width: 100%;
			display: block;
			height: 340rpx;

		}
	}
</style>
